<template>
  <PageWrapper :contentFullHeight="true">
    <Row :gutter="24">
      <Col :xs="24" :sm="24" :md="24" :lg="4" :xl="4" style="background-color: white">
        <Tabs v-model:activeKey="activeKey">
          <TabPane key="1" :tab="t('routes.demo.documentWorkPlace.directory')">
            <div class="tree-container">
              <BasicTree
                :treeData="documentData"
                :toolbar="true"
                :search="true"
                @select="selectDoc"
                :beforeRightClick="rightClick"
              />
            </div>
          </TabPane>
        </Tabs>
      </Col>
      <Col
        :xs="24"
        :sm="24"
        :md="24"
        :lg="19"
        :xl="19"
        style="background-color: white; margin-left: 10px"
      >
        <Row>
          <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <BasicTable @register="registerTable">
              <!-- 左侧 -->
              <!-- <template #tableTitle>
                <div style="width: 700px">
                  <Tabs v-model:activeKey="typeActiveKey">
                    <TabPane v-for="i in 10" :key="i" :tab="`类型-${i}`" />
                  </Tabs>
                </div>
              </template> -->
              <!-- 右侧 -->
              <template #toolbar>
                <a-button type="primary" @click="handleCreateDoc">
                  {{ t('common.create') }}
                </a-button>
              </template>
              <!-- 代号 -->
              <template #name="{ text: name, record }">
                <Row>
                  <Col :span="22" class="text-ellipsis">
                    <Tooltip :title="name">
                      <a @click="getCurrentRecord(record)">{{ name }}</a>
                    </Tooltip>
                  </Col>
                  <Col :span="2"
                    ><Icon icon="ion:ios-copy-outline" color="#7a7374" @click="handleCopy(name)"
                  /></Col>
                </Row>
              </template>
              <!-- 创建时间 -->
              <template #creattime="{ text: creattime }">
                <span>
                  {{ proxy.$filters.filterTime(creattime) }}
                </span>
              </template>
              <!-- 文档状态 -->
              <template #state="{ text: state }">
                <span>
                  <Tag :color="state === '8' ? 'green' : state === '1' ? 'red' : 'blue'">
                    {{ proxy.$filters.filterDocumentStatus(state) }}
                  </Tag>
                </span>
              </template>
              <!-- 是否为关联文件 -->
              <template #isshortcut="{ text: isshortcut }">
                <span>
                  <Tag :color="isshortcut === '1' ? 'green' : isshortcut === '0' ? 'red' : 'blue'">
                    {{ proxy.$filters.filterIsRelated(isshortcut) }}
                  </Tag>
                </span>
              </template>
              <!-- 操作 -->
              <template #action="{ record }">
                <TableAction
                  :actions="[
                    {
                      icon: 'ion:ios-download-outline',
                      tooltip: t('common.checkIn'),
                      popConfirm: {
                        title: t('common.directCheckIn'),
                        placement: 'top',
                        confirm: handleDirectCheckIn.bind(null, record),
                        cancel: handleCheckIn.bind(null, record),
                        okText: t('common.yes'),
                        cancelText: t('common.no'),
                      },
                      ifShow: record.state === '1',
                    },
                    {
                      icon: 'ion:ios-upload-outline',
                      tooltip: t('common.checkOut'),
                      popConfirm: {
                        title: t('common.directCheckOut'),
                        placement: 'top',
                        confirm: handleDirectCheckOut.bind(null, record),
                        cancel: handleCheckOut.bind(null, record),
                        okText: t('common.yes'),
                        cancelText: t('common.no'),
                      },
                      ifShow: record.state === '8',
                    },
                    {
                      icon: 'ion:ios-redo-outline',
                      tooltip: t('common.undo'),
                      popConfirm: {
                        title: t('common.confirmUndo'),
                        placement: 'top',
                        confirm: handleCancel.bind(null, record),
                      },
                      ifShow: record.state === '1',
                    },
                    {
                      icon: 'ion:trash-outline',
                      tooltip: t('common.delete'),
                      color: 'error',
                      popConfirm: {
                        title: t('common.confirmDelete'),
                        placement: 'top',
                        confirm: handleDelete.bind(null, record),
                      },
                      ifShow: record.state === '8',
                    },
                  ]"
                  :dropDownActions="[
                    {
                      label: t('routes.demo.documentManager.operationButton.view'),
                      onClick: handleDocDetail.bind(null, record),
                    },
                    {
                      label: t('routes.demo.documentManager.operationButton.borrow'),
                      onClick: handleBorrow.bind(null, record),
                    },
                    {
                      label: t('routes.demo.documentManager.operationButton.browse'),
                      onClick: handleBrowse.bind(null, record),
                    },
                    {
                      label: t('routes.demo.documentManager.operationButton.compareBrowse'),
                    },
                    {
                      label: t('routes.demo.documentManager.operationButton.downloadDoc'),
                      onClick: handleDownload.bind(null, record),
                    },
                    {
                      label: t('routes.demo.documentManager.operationButton.convert'),
                    },
                    {
                      label: t('routes.demo.documentManager.operationButton.usage'),
                      onClick: handleUsage.bind(null, record),
                    },
                    {
                      label: t(
                        'routes.demo.documentManager.operationButton.relatedProcessInstance',
                      ),
                      onClick: handleFlowDetail.bind(null, record),
                    },
                    {
                      label: t('routes.demo.documentManager.operationButton.associatedObject'),
                      onClick: handleAssociated.bind(null, record),
                    },
                    {
                      label: t('routes.demo.documentManager.operationButton.reverseAssociated'),
                    },
                    {
                      label: t('routes.demo.documentManager.operationButton.newProcess'),
                      onClick: handleCreateFlow.bind(null, record),
                    },
                    {
                      label: t('routes.demo.documentManager.operationButton.workAssign'),
                      onClick: handleAssign.bind(null, record),
                    },
                  ]"
                />
              </template>
            </BasicTable>
          </Col>
        </Row>
        <Divider />
        <Row>
          <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <Tabs v-model:activeKey="docDetailActiveKey">
              <!-- <TabPane key="1" tab="属性">
                <Row :gutter="12">
                  <Col :xs="4" :sm="4" :md="4" :lg="4" :xl="4" />
                  <Col :xs="4" :sm="4" :md="4" :lg="4" :xl="4"> 文件名称：{{ fileName }} </Col>
                  <Col :xs="4" :sm="4" :md="4" :lg="4" :xl="4"> 版本：{{ version }} </Col>
                  <Col :xs="6" :sm="6" :md="6" :lg="6" :xl="6"> 类型：{{ type }} </Col>
                  <Col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
                    创建时间：{{ proxy.$filters.filterTime(createTime) }}
                  </Col>
                </Row>
              </TabPane> -->
              <TabPane key="2" :tab="t('routes.demo.documentManager.DocPreview')">
                <iframe
                  v-show="iframeLoading"
                  ref="ifameName"
                  :src="previewSrc"
                  frameborder="10"
                  style="width: 95%; height: 300px"
                  :onload="onload"
                ></iframe>
                <Empty v-show="!iframeLoading" :description="description" />
              </TabPane>
              <TabPane key="3" :tab="t('routes.demo.documentManager.DocVersionShow')">
                <BasicTable @register="registerVersion" :dataSource="versionList" />
              </TabPane>
              <!-- <TabPane key="4" :tab="t('routes.demo.documentManager.DocChangeRecord')"> 4 </TabPane> -->
              <TabPane key="5" :tab="t('routes.demo.documentManager.DocRelatedDoc')">
                <BasicTable @register="registerAssociatedImage" :dataSource="associatedImageList" />
              </TabPane>
            </Tabs>
          </Col>
        </Row>
      </Col>
    </Row>
    <!-- 新建图档-选择图档类型 -->
    <BasicModal
      v-bind="$attrs"
      :title="t('routes.demo.documentWorkPlace.selectFileType')"
      @register="registerDireTypeModal"
      @ok="handleSubmit"
      @cancel="cancelDocType"
      :destroyOnClose="true"
      :minHeight="100"
      :width="400"
    >
      <Select
        allowClear
        style="width: 100%"
        :placeholder="t('routes.demo.documentWorkPlace.selectFileType')"
        v-model:value="fileType"
        @select="handleSelect"
      >
        <SelectOption
          v-for="(item, index) in documentTypeList"
          :value="item.fileTypeId"
          :key="index"
          >{{ item.fileTypeName }}</SelectOption
        >
      </Select>
    </BasicModal>
    <!-- 图文档详情 -->
    <BasicModal
      v-bind="$attrs"
      :title="t('routes.demo.documentManager.docDetail.documentDetail')"
      @register="registerDocDetailModal"
      @ok="handleSubmitDocDetail"
      :destroyOnClose="true"
      :minHeight="100"
      :width="1200"
    >
      <Tabs v-model:activeKey="detailActiveKey">
        <TabPane key="1" :tab="t('routes.demo.documentManager.docDetail.Property')">
          <BasicForm @register="registerForm" />
        </TabPane>
        <TabPane key="2" :tab="t('routes.demo.documentManager.docDetail.Attachment')">
          <BasicTable @register="registerAttachment" :dataSource="fileAttachments" />
        </TabPane>
        <TabPane key="3" :tab="t('routes.demo.documentManager.docDetail.Associated')">
          <BasicTable @register="registerAssociation" :dataSource="fileAssociationList" />
        </TabPane>
        <TabPane key="4" :tab="t('routes.demo.documentManager.docDetail.ReverseAssociated')">
          <BasicTable @register="registerBeAssociation" :dataSource="associationFileList" />
        </TabPane>
      </Tabs>
    </BasicModal>
    <!-- 详情弹窗 -->
    <!-- 目录新增修改 -->
    <directoryModal @register="registerDireModal" @success="reloadGetDirectoryLevel" />
    <!-- 检入检出流程 -->
    <initiateFlow @register="registerModal" ref="AddWorkFlowForm" />
    <!-- 对象类绑定 -->
    <objBindModal @register="registerObjBindModal" />
    <!-- 关联，反关联弹窗 -->
    <assObjModal @register="registerAssociatedModal" @success="reload()" />
    <!-- 相关流程实例 -->
    <flowDetailModal @register="registerFlowDetailModal" />
    <!-- 文件导入弹窗 -->
    <importFileModal @register="registerFileImportModal" @success="reload()" />
    <!-- 借阅流程 -->
    <selectForm @register="registerBorrowModal" />
    <!-- 目录工作指派 -->
    <workAssignModal @register="registerDireWorkModal" />
    <!-- 文件工作指派 -->
    <DocWorkAssign @register="registerDocWorkModal" @success="reload()" />
    <!-- 新建图文档-文档类型弹窗 -->
    <CreateDocModal @register="registerDocumentTypeModal" @success="reload()" />
    <!-- 使用情况 -->
    <usage @register="registerUsageModal" />
    <!-- 提取导入 -->
    <extractImport @register="registerExtractImportModal" />
    <!-- Excel导入 -->
    <excelImport @register="registerExcelImportModal" />
    <!-- 新建流程 -->
    <CreateFlowModal @register="registerCreateFlowModal" />
    <!-- 目录权限设置 -->
    <permissionModal @register="registerPermissionModal" />
    <!-- 新建表单类型图文档 -->
    <formTypeModal @register="registerFormTypeModal" @success="reload()" />
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { ref, nextTick, getCurrentInstance } from 'vue';
  import {
    Row,
    Col,
    Tabs,
    TabPane,
    Divider,
    Select,
    SelectOption,
    Empty,
    Tooltip,
    Tag,
  } from 'ant-design-vue';

  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { PageWrapper } from '/@/components/Page';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { BasicForm, useForm } from '/@/components/Form';
  import { BasicModal, useModal } from '/@/components/Modal';
  import { BasicTree } from '/@/components/Tree/index';
  import throttle from 'lodash/throttle';
  import { Base64 } from 'js-base64';
  import { Icon } from '/@/components/Icon';

  import {
    getDocumentColumns,
    getDocumentConfig,
    getAttribute,
    getAttachment,
    getAssociation,
    getBeAssociation,
    getPartVersionList,
    getAssociatedImageList,
  } from './tableData';

  import initiateFlow from '../workFlow/initiateFlow.vue';
  import objBindModal from './objBindModal.vue';
  import directoryModal from './directoryModal.vue';
  import assObjModal from './assObjModal.vue';
  import flowDetailModal from './flowDetailModal.vue';
  import importFileModal from './importFileModal.vue';
  import selectForm from '../formManager/selectForm.vue';
  import workAssignModal from './workAssignModal.vue';
  import DocWorkAssign from './DocWorkAssign.vue';
  import CreateDocModal from './CreateDocModal.vue';
  import usage from './usage.vue';
  import extractImport from './extractImport.vue';
  import excelImport from './excelImport.vue';
  import CreateFlowModal from '/@/views/components/createNewProcess.vue';
  import permissionModal from './components/permissionModal.vue';
  import formTypeModal from './components/formTypeModal.vue';

  import {
    getDirectoryLevel,
    deletePrdFolder,
    getPrdFolder,
    addLibraryIndex,
    getPrdFileList,
    cancelFile,
    deleteFile,
    checkIn,
    checkOut,
    downloadFile,
    getPrdFileDetail,
    getPrdFileVersionList,
    downloadFolderList,
    getRelatedFileList,
    getWorkAssignList,
    getAllFileType,
    browseFile,
  } from '/@/api/demo/document';
  import { getBorrowBdDataJudge } from '/@/api/demo/knowledge';

  // 定义默认值
  const { t } = useI18n();
  const { proxy }: any = getCurrentInstance();
  const { createMessage } = useMessage();
  const documentSuperId = ref<number>(0);
  const documentData = ref<any>([]);
  const activeKey = ref<string>('1');
  const typeActiveKey = ref<number>(1);
  const detailActiveKey = ref<string>('1');
  const docDetailActiveKey = ref<string>('2');
  const selectedDocKey = ref<string>('');
  const AddWorkFlowForm = ref<any>(null);
  const selectRowClass = ref<any>('');
  // 文件名称
  const fileName = ref<string>('');
  // 版本
  const version = ref<string>('');
  // 类型
  const type = ref<string>('');
  // 创建时间
  const createTime = ref<string>('');
  const fileQuality = ref<any>({});
  const fileAttachments = ref<any>([]);
  const fileAssociationList = ref<any>([]);
  const associationFileList = ref<any>([]);
  // 版本展示
  const versionList = ref<any>([]);
  // 相关图档
  const associatedImageList = ref<any>([]);
  // 图档类型
  const documentTypeList = ref<any>([]);
  const fileType = ref<string>(null);
  const isBdData = ref<any>({});
  const previewSrc = ref<string>('');
  const ifameName = ref(null);
  const iframeLoading = ref(false);
  const description = ref('暂无数据');

  const onload = () => {
    const iframe = ifameName.value;
    if (iframe !== null) {
      if (iframe && iframe.contentWindow) {
        iframeLoading.value = true;
      } else {
        iframe.addEventListener('load', () => {
          iframeLoading.value = true;
        });
      }
    }
  };

  // 接口请求
  getDirectoryLevel(documentSuperId.value).then((res) => {
    documentData.value = res;
  });
  const reloadGetDirectoryLevel = () => {
    getDirectoryLevel(documentSuperId.value).then((res) => {
      nextTick(() => {
        documentData.value = res;
      });
    });
  };

  // 方法
  // 新建图档
  const handleCreateDoc = () => {
    if (selectedDocKey.value === '') {
      createMessage.warning(t('routes.demo.partManagerSettings.directoryPlaceholder'));
    } else {
      let fid = Number(selectedDocKey.value);
      getAllFileType(fid).then((res) => {
        documentTypeList.value = res;
      });
      openDireTypeModal(true);
    }
  };

  const selectDoc = (selectedKeys) => {
    selectedDocKey.value = selectedKeys[0];
    reload();
  };

  const rightClick = (node) => {
    const arr = [
      {
        label: t('routes.demo.documentWorkPlace.basicFunction'),
        children: [
          {
            label: t('common.create'),
            handler: () => {
              openDireModal(true, { treeKey: node.eventKey, isUpdate: false });
            },
          },
          {
            label: t('common.edit'),
            handler: () => {
              getPrdFolder(node.eventKey).then((res) => {
                openDireModal(true, { treeKey: node.eventKey, isUpdate: true, res });
              });
            },
          },
          {
            label: t('common.delete'),
            handler: () => {
              deletePrdFolder(node.eventKey).then(() => {
                reloadGetDirectoryLevel();
                createMessage.success(t('common.delSuccessText'));
              });
            },
          },
          {
            label: t('common.copy'),
          },
          {
            label: t('common.paste'),
          },
        ],
      },
      {
        label: t('routes.demo.documentWorkPlace.index'),
        handler: () => {
          addLibraryIndex(Number(node.eventKey)).then(() => {
            createMessage.success(t('common.addSuccessText'));
          });
        },
      },
      {
        label: t('routes.demo.documentWorkPlace.workAssign'),
        handler: () => {
          getWorkAssignList(node.eventKey, '1').then((res) => {
            openDireWorkModal(true, res);
          });
        },
      },
      {
        label: t('routes.demo.documentWorkPlace.imageList'),
        handler: () => {
          downloadFolderList(node.eventKey).then(() => {
            createMessage.success(t('common.exportSuccessText'));
          });
        },
      },
      {
        label: t('routes.demo.documentWorkPlace.download'),
      },
      {
        label: t('routes.demo.documentWorkPlace.import'),
        children: [
          {
            label: t('routes.demo.documentWorkPlace.localFileImport'),
            handler: () => {
              openFileImportModal(true, { treeKey: node.eventKey });
            },
          },
          {
            label: t('routes.demo.documentWorkPlace.extractImport'),
            handler: () => {
              openExtractImportModal(true, { treeKey: node.eventKey });
            },
          },
          {
            label: t('routes.demo.documentWorkPlace.excelImport'),
            handler: () => {
              openExcelImportModal(true, { treeKey: node.eventKey });
            },
          },
          {
            label: t('routes.demo.documentWorkPlace.dataImport'),
          },
        ],
      },
      {
        label: t('routes.demo.documentWorkPlace.export'),
        children: [
          {
            label: t('routes.demo.documentWorkPlace.byCatalog'),
          },
          {
            label: t('routes.demo.documentWorkPlace.byCatalog2'),
          },
          {
            label: t('routes.demo.documentWorkPlace.byCatalog3'),
          },
        ],
      },
      {
        label: t('routes.demo.documentWorkPlace.printDrawings'),
        children: [
          {
            label: t('routes.demo.documentWorkPlace.cadDrawings'),
          },
          {
            label: t('routes.demo.documentWorkPlace.sldrwDrawings'),
          },
        ],
      },
      {
        label: t('routes.demo.documentWorkPlace.printByBOM'),
        children: [
          {
            label: t('routes.demo.documentWorkPlace.CADDrawingsOnly'),
          },
          {
            label: t('routes.demo.documentWorkPlace.SLDDRWDrawingsOnly'),
          },
        ],
      },
      {
        label: t('routes.demo.documentWorkPlace.transition'),
        children: [
          {
            label: t('routes.demo.documentWorkPlace.SLDDRWToDwg'),
          },
          {
            label: t('routes.demo.documentWorkPlace.SLDDRWToPdf'),
          },
        ],
      },
      {
        label: t('routes.demo.documentWorkPlace.set'),
        children: [
          {
            label: t('routes.demo.documentWorkPlace.permission'),
            handler: () => {
              openDirePermissionModal(true, { treeKey: node.eventKey });
            },
          },
          {
            label: t('routes.demo.documentWorkPlace.objectClassBind'),
            handler: () => {
              openObjBindModal(true, { treeKey: node.eventKey });
            },
          },
        ],
      },
    ];
    return arr;
  };

  // 查看
  const handleDocDetail = (record: Recordable) => {
    if (record.dataType & 64) {
      openFormTypeModal(true, {
        fileType: fileType.value,
        selectedDirKey: selectedDocKey.value,
        oid: record.oId,
        typeName: record.type,
        version: record.version,
        type: '查看',
      });
    } else {
      getPrdFileDetail(record.id).then((res) => {
        setFieldsValue(res.fileQuality);
        fileQuality.value = res.fileQuality;
        fileAttachments.value = res.fileAttachments;
        fileAssociationList.value = res.fileAssociationList;
        associationFileList.value = res.associationFileList;
      });
      openDocDetailModal(true);
    }
  };

  //  检入
  const handleDirectCheckIn = (record: Recordable) => {
    checkIn(record.id).then(() => {
      reload();
      createMessage.success(t('common.checkInSuccessText'));
    });
  };

  const handleCheckIn = (record: Recordable) => {
    AddWorkFlowForm.value.lcShow(record, 'jr', '', '', '', '', '', record.id);
  };

  // 检出
  const handleDirectCheckOut = (record: Recordable) => {
    checkOut(record.id).then(() => {
      reload();
      createMessage.success(t('common.checkOutSuccessText'));
    });
  };

  const handleCheckOut = (record: Recordable) => {
    AddWorkFlowForm.value.lcShow(record, 'jc', '', '', '', '', '', record.id);
  };

  // 撤销
  const handleCancel = (record: Recordable) => {
    cancelFile(record.id).then(() => {
      reload();
      createMessage.success(t('common.undoSuccessText'));
    });
  };

  // 删除
  const handleDelete = (record: Recordable) => {
    deleteFile(record.id).then(() => {
      reload();
      createMessage.success(t('common.delSuccessText'));
    });
  };

  // 下载图档
  const handleDownload = throttle((record: Recordable) => {
    downloadFile(record.id, record.version, record.filename).then(() => {
      createMessage.success(t('common.downLoadSuccess'));
    });
  }, 3000);

  //关联对象
  const handleAssociated = () => {
    openAssociatedModal(true, { isAssociation: true, selectedDirKey: selectedDocKey.value });
  };

  // 相关流程实例
  const handleFlowDetail = (record: Recordable) => {
    openFlowDetailModal(true, record);
  };

  // 借阅功能
  const handleBorrow = (record: Recordable) => {
    getBorrowBdDataJudge().then((res) => {
      if (res === '1') {
        if (record.state === '8') {
          const param = {
            record: record,
            currentDireId: selectedDocKey.value,
          };
          openBorrowModal(true, param);
        } else {
          createMessage.error(t('routes.demo.documentManager.onlyBorrowAble'));
        }
      } else {
        const param = {
          record: record,
          currentDireId: selectedDocKey.value,
        };
        openBorrowModal(true, param);
      }
    });
  };

  // 新建流程
  const handleCreateFlow = (record: Recordable) => {
    AddWorkFlowForm.value.lcShow(record, 'tz', '', '', '', '', '', record.id);
  };

  // 工作指派
  const handleAssign = (record: Recordable) => {
    if (record.state !== '1') {
      createMessage.error(t('routes.demo.documentManager.objectNotCheckout'));
    } else {
      getWorkAssignList(record.id, '0').then((res) => {
        openDocWorkModal(true, { recordData: record, workAssignList: res });
      });
    }
  };

  // 复制代号
  const handleCopy = (name) => {
    navigator.clipboard.writeText(name).then(() => {
      createMessage.success(t('common.copySuccessText'));
    });
  };

  // 提交
  async function handleSubmit() {
    if (isBdData.value.isBd === '0') {
      // 图档
      openDirModal(true, { fileType: fileType.value, selectedDirKey: selectedDocKey.value });
    } else if (isBdData.value.isBd === '1') {
      // 表单
      openFormTypeModal(true, {
        fileType: fileType.value,
        selectedDirKey: selectedDocKey.value,
        type: '新增',
      });
    }
    cancelDocType();
  }
  const cancelDocType = () => {
    fileType.value = null;
    closeDireTypeModal();
  };

  const handleSelect = (value) => {
    isBdData.value = documentTypeList.value.find((item) => item.fileTypeId === value);
  };

  const handleSubmitDocDetail = () => {
    closeDocDetailModal();
  };

  // 浏览功能
  const handleBrowse = throttle((record: Recordable) => {
    browseFile(record.id, record.version).then((res) => {
      let url = res[0]; //要预览文件的访问地址
      const innerWidth = (window.innerWidth - 1000) / 2;
      const innerHeight = (window.innerHeight - 600) / 2;
      const windowFeatures = `left=${innerWidth},top=${innerHeight},width=1000,height=600`;
      window.open(
        res.data.result[1] + ':8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(url)),
        'mozillaWindow',
        windowFeatures,
      );
    });
  }, 3000);

  // 使用情况
  const handleUsage = (record: Recordable) => {
    openUsageModal(true, { record });
  };

  // 表格初始化
  const [registerTable, { reload }] = useTable({
    columns: getDocumentColumns(),
    api: getPrdFileList,
    beforeFetch: () => {
      return selectedDocKey.value;
    },
    bordered: true,
    // useSearchForm: true,
    // formConfig: getDocumentConfig(), // 表单配置
    showIndexColumn: false,
    showTableSetting: true, // 显示表格设置工具
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    // pagination: { pageSize: 5, pageSizeOptions: ['5', '10', '15', '20'], defaultPageSize: 5 },
    pagination: false,
    maxHeight: 220,
    // canResize: false,
    striped: false,
    customRow: (record: Recordable) => {
      return {
        onClick: () => {
          selectRowClass.value = record.id;
          fileName.value = record.name;
          version.value = record.version;
          type.value = record.type;
          createTime.value = record.creattime;
        },
      };
    },
    rowClassName: (record: Recordable) => {
      return record.id === selectRowClass.value ? 'table-row-selected' : '';
    },
    actionColumn: {
      width: 200,
      title: t('common.action'),
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });

  // 属性详情
  const [registerForm, { setFieldsValue }] = useForm({
    labelCol: { span: 4 },
    wrapperCol: { span: 20 },
    schemas: getAttribute(),
    showResetButton: false,
    showSubmitButton: false,
  });
  // 附件详情
  const [registerAttachment] = useTable({
    columns: getAttachment(),
    bordered: true,
    showIndexColumn: false,
    showTableSetting: true, // 显示表格设置工具
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    canResize: false,
  });
  // 关联详情
  const [registerAssociation] = useTable({
    columns: getAssociation(),
    bordered: true,
    showIndexColumn: false,
    showTableSetting: true, // 显示表格设置工具
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    canResize: false,
  });
  // 被关联详情
  const [registerBeAssociation] = useTable({
    columns: getBeAssociation(),
    bordered: true,
    showIndexColumn: false,
    showTableSetting: true, // 显示表格设置工具
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    canResize: false,
  });
  // 版本展示
  const [registerVersion, { setColumns }] = useTable({
    columns: getPartVersionList(),
    bordered: true,
    showIndexColumn: false,
    showTableSetting: false, // 显示表格设置工具
    tableSetting: { fullScreen: false }, // 表格设置工具配置
    canResize: false,
  });
  // 相关图档
  const [registerAssociatedImage] = useTable({
    columns: getAssociatedImageList(),
    bordered: true,
    showIndexColumn: false,
    showTableSetting: false, // 显示表格设置工具
    tableSetting: { fullScreen: false }, // 表格设置工具配置
    canResize: false,
  });

  // 查看下列
  const getCurrentRecord = (record) => {
    getPrdFileDetail(record.id).then((res) => {
      setFieldsValue(res.fileQuality);
      fileQuality.value = res.fileQuality;
      fileAttachments.value = res.fileAttachments;
      fileAssociationList.value = res.fileAssociationList;
      associationFileList.value = res.associationFileList;
    });
    getPrdFileVersionList(record.id).then((res) => {
      nextTick(() => {
        if (res !== null) {
          versionList.value = res;
          let newArr = [];
          for (let i = 0; i < Object.keys(versionList.value[0]).length; i++) {
            let obj = {
              title: '',
              dataIndex: '',
              fixed: i == 0 ? 'left' : '',
              width: i == 0 ? 300 : 100,
            };
            obj.title = Object.keys(versionList.value[0])[i];
            obj.dataIndex = Object.keys(versionList.value[0])[i];
            newArr.push(obj);
          }
          setColumns(newArr);
        }
      });
    });
    // 相关图档列表
    getRelatedFileList(record.id).then((res) => {
      associatedImageList.value = res;
    });
    // 图档浏览
    browseFile(record.id, record.version).then((res) => {
      let url =
        'http://127.0.0.1:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(res[0]));
      previewSrc.value = url;
      description.value = t('common.loadingText');
    });
  };

  // 弹窗
  const [registerDireModal, { openModal: openDireModal }] = useModal();

  // 发起流程弹窗
  const [registerModal] = useModal();

  // 对象类绑定设置弹窗
  const [registerObjBindModal, { openModal: openObjBindModal }] = useModal();

  // 关联，反关联弹窗
  const [registerAssociatedModal, { openModal: openAssociatedModal }] = useModal();

  // 相关流程实例
  const [registerFlowDetailModal, { openModal: openFlowDetailModal }] = useModal();

  // 文件导入弹窗
  const [registerFileImportModal, { openModal: openFileImportModal }] = useModal();

  // 借阅流程弹窗
  const [registerBorrowModal, { openModal: openBorrowModal }] = useModal();

  // 目录工作指派
  const [registerDireWorkModal, { openModal: openDireWorkModal }] = useModal();

  // 文档工作指派
  const [registerDocWorkModal, { openModal: openDocWorkModal }] = useModal();

  // 新建图档-图档类型
  const [registerDireTypeModal, { openModal: openDireTypeModal, closeModal: closeDireTypeModal }] =
    useModal();

  // 图文档详情
  const [
    registerDocDetailModal,
    { openModal: openDocDetailModal, closeModal: closeDocDetailModal },
  ] = useModal();

  // 新建图档-图档弹窗
  const [registerDocumentTypeModal, { openModal: openDirModal }] = useModal();

  // 使用情况
  const [registerUsageModal, { openModal: openUsageModal }] = useModal();

  //提取导入
  const [registerExtractImportModal, { openModal: openExtractImportModal }] = useModal();

  // Excel导入
  const [registerExcelImportModal, { openModal: openExcelImportModal }] = useModal();

  // 新建流程
  const [registerCreateFlowModal, { openModal: openNewFlowModal }] = useModal();

  // 目录权限设置
  const [registerPermissionModal, { openModal: openDirePermissionModal }] = useModal();

  // 表单类型新建图文档
  const [registerFormTypeModal, { openModal: openFormTypeModal }] = useModal();
</script>
<style lang="less" scoped>
  .documentManager {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 80px;
    border: 1px solid #aaa;
    writing-mode: vertical-lr;
    cursor: pointer;
  }

  ::v-deep(.table-row-selected) {
    background-color: #e6f7ff !important;
  }

  .text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tree-container {
    height: 700px;
    overflow-y: auto;
  }
</style>
